<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box shadow CSS generator</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.22.10/babel.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        .preview-box {
            width: 200px;
            height: 200px;
            margin: 20px auto;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #ccc;
        }
        .control-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input[type="range"], input[type="color"] {
            width: 100%;
        }
        .css-output {
            background-color: #f4f4f4;
            padding: 10px;
            border-radius: 4px;
            font-family: monospace;
            white-space: pre-wrap;
        }
        button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <p><a href="https://simonwillison.net/2024/Jul/8/box-shadow-css-generator/">How I built this with Claude 3.5 Sonnet</a></p>

    <script type="text/babel">
        const BoxShadowTool = () => {
            const [horizontalOffset, setHorizontalOffset] = React.useState(0);
            const [verticalOffset, setVerticalOffset] = React.useState(4);
            const [blurRadius, setBlurRadius] = React.useState(8);
            const [spreadRadius, setSpreadRadius] = React.useState(0);
            const [color, setColor] = React.useState('#000000');
            const [opacity, setOpacity] = React.useState(20);

            const boxShadow = `${horizontalOffset}px ${verticalOffset}px ${blurRadius}px ${spreadRadius}px ${color}${Math.round(opacity * 2.55).toString(16).padStart(2, '0')}`;
            const cssCode = `box-shadow: ${boxShadow};`;

            const copyToClipboard = () => {
                navigator.clipboard.writeText(cssCode);
                alert('CSS copied to clipboard!');
            };

            return (
                <div>
                    <h1>Box shadow CSS generator</h1>
                    <div className="preview-box" style={{ boxShadow }}>
                        Preview
                    </div>
                    
                    <div className="control-group">
                        <label>Horizontal Offset: {horizontalOffset}px</label>
                        <input
                            type="range"
                            min="-50"
                            max="50"
                            value={horizontalOffset}
                            onChange={(e) => setHorizontalOffset(Number(e.target.value))}
                        />
                    </div>
                    
                    <div className="control-group">
                        <label>Vertical Offset: {verticalOffset}px</label>
                        <input
                            type="range"
                            min="-50"
                            max="50"
                            value={verticalOffset}
                            onChange={(e) => setVerticalOffset(Number(e.target.value))}
                        />
                    </div>
                    
                    <div className="control-group">
                        <label>Blur Radius: {blurRadius}px</label>
                        <input
                            type="range"
                            min="0"
                            max="50"
                            value={blurRadius}
                            onChange={(e) => setBlurRadius(Number(e.target.value))}
                        />
                    </div>
                    
                    <div className="control-group">
                        <label>Spread Radius: {spreadRadius}px</label>
                        <input
                            type="range"
                            min="-50"
                            max="50"
                            value={spreadRadius}
                            onChange={(e) => setSpreadRadius(Number(e.target.value))}
                        />
                    </div>
                    
                    <div className="control-group">
                        <label>Color</label>
                        <input
                            type="color"
                            value={color}
                            onChange={(e) => setColor(e.target.value)}
                        />
                    </div>
                    
                    <div className="control-group">
                        <label>Opacity: {opacity}%</label>
                        <input
                            type="range"
                            min="0"
                            max="100"
                            value={opacity}
                            onChange={(e) => setOpacity(Number(e.target.value))}
                        />
                    </div>
                    
                    <div className="control-group">
                        <label>CSS Code:</label>
                        <div className="css-output">{cssCode}</div>
                        <button onClick={copyToClipboard}>Copy to Clipboard</button>
                    </div>
                </div>
            );
        };

        ReactDOM.render(<BoxShadowTool />, document.getElementById('root'));
    </script>
</body>
</html>
